<script>
import { identity } from '@/util/identity.js';

export default {
    name: "TrainCard",
    props: {
        item: {
            type: Object,
            default: () => ({
                id: null, // 添加默认值，确保即使未传递 id 也不会报错
                imgUrl: null,
                title: "康复训练视频1",
                content: "训练主要内容为……",
                duration: "20分钟",
            }),
        },
        checked: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 滑动相关状态
            startX: 0,
            currentX: 0,
            isSwipeOpen: false,
            swipeOffset: 0,
            maxSwipeOffset: 120, // 最大滑动距离
            swipeThreshold: 20, // 左划阈值，超过此距离才开始滑动
        };
    },
    computed: {
        // 判断用户权限 - 使用 identity 系统
        isPrivileged() {
            return identity.isHealthTeam();
        },
    },
    methods: {
        navigateToDetail() {
            if (!this.item.id) {
                console.error("视频 ID 不存在");
                return;
            }
            uni.navigateTo({
                url: `/sub_pages/pages/train_content/train_content?videoId=${this.item.id}`,
            });
        },
        
        // 编辑训练视频方法
        editVideo() {
            this.$emit('edit', this.item);
            this.closeSwipe();
        },
        
        deleteVideo() {
            if (!this.item.id) {
                console.error("视频 ID 不存在");
                return;
            }
            uni.showModal({
                title: "确认删除",
                content: "确定要删除该视频吗？",
                success: (res) => {
                    if (res.confirm) {
                        this.$request({
                            url: `/train/video/delete/`, // 修改接口路径
                            method: "POST", // 修改请求类型为 POST
                            data: {
                                video_id: this.item.id, // 修改参数为 video_id
                            },
                            success: (response) => {
                                if (response.statusCode === 200) {
                                    uni.showToast({
                                        title: "删除成功",
                                        icon: "success",
                                    });
                                    this.$emit("delete", this.item.id); // 通知父组件更新列表
                                } else {
                                    uni.showToast({
                                        title: "删除失败",
                                        icon: "none",
                                    });
                                }
                            },
                            fail: (error) => {
                                console.error("删除请求失败", error);
                                uni.showToast({
                                    title: "删除失败",
                                    icon: "none",
                                });
                            },
                        });
                    }
                },
            });
            this.closeSwipe();
        },
        
        // 滑动相关方法
        onTouchStart(e) {
            this.startX = e.touches[0].clientX;
        },
        
        onTouchMove(e) {
            if (!this.isPrivileged) return;
            
            this.currentX = e.touches[0].clientX;
            const deltaX = this.startX - this.currentX;
            
            if (deltaX > 0) { // 左滑
                if (deltaX > this.swipeThreshold) {
                    this.swipeOffset = Math.min(deltaX - this.swipeThreshold, this.maxSwipeOffset);
                } else {
                    this.swipeOffset = 0;
                }
            } else { // 右滑
                if (this.isSwipeOpen) {
                    this.swipeOffset = Math.max(this.maxSwipeOffset + deltaX, 1);
                } else {
                    this.swipeOffset = 0;
                }
            }
        },
        
        onTouchEnd() {
            if (!this.isPrivileged) return;
            
            const openThreshold = this.maxSwipeOffset / 2;
            
            if (this.swipeOffset > openThreshold) {
                this.openSwipe();
            } else {
                this.closeSwipe();
            }
        },
        
        openSwipe() {
            this.swipeOffset = this.maxSwipeOffset;
            this.isSwipeOpen = true;
        },
        
        closeSwipe() {
            this.swipeOffset = 0;
            setTimeout(() => {
                this.isSwipeOpen = false;
            }, 300);
        },
    },
};
</script>

<template>
  <view class="swipe-container">
    <!-- 功能栏 -->
    <view v-if="isPrivileged && (swipeOffset > 0 || isSwipeOpen)" class="action-bar" :style="{ transform: `translateX(${120 - swipeOffset}rpx)` }">
      <view class="action-button edit-button" @tap.stop="editVideo">
        <text class="action-icon">✏️</text>
        <text class="action-text">编辑</text>
      </view>
      <view class="action-button delete-button" @tap.stop="deleteVideo">
        <text class="action-icon">🗑️</text>
        <text class="action-text">删除</text>
      </view>
    </view>
    
    <!-- 卡片内容 -->
    <view 
      class="flex-row items-start list-item"
      :style="{ transform: `translateX(-${swipeOffset}rpx)` }"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
      @tap="navigateToDetail"
    >
      <!-- <video class="video_8" :src="item.imgUrl" controls /> -->
      <view class="ml-18 flex-col flex-1">
        <view class="flex-col items-start">
          <text class="font_2">{{ item.title }}</text>
          <text class="font_3 mt-10">{{ item.content }}</text>
        </view>
        <view class="flex-col items-start mt-36">
          <text class="font_4">预计时长: {{ item.duration }}</text>
          <view class="flex-col justify-start items-center text-wrapper_2 mt-4">
            <text class="font_5 text_5">训练</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="css">
/* 滑动容器 */
.swipe-container {
  position: relative;
  overflow: hidden;
  border-radius: 16rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
}

/* 卡片内容 */
.list-item {
  padding: 30rpx;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 2;
}

.list-item:first-child {
  margin-top: 0;
}

/* 功能栏 */
.action-bar {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 120rpx;
  display: flex;
  flex-direction: column;
  z-index: 1;
  transition: transform 0.3s ease;
  border-radius: 0 16rpx 16rpx 0;
}

.action-button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 24rpx;
  cursor: pointer;
}

.edit-button {
  background-color: #4CAF50;
  border-radius: 0;
}

.delete-button {
  background-color: #f44336;
  border-radius: 0;
}

.action-icon {
  font-size: 36rpx;
  margin-bottom: 8rpx;
}

.action-text {
  font-size: 20rpx;
  font-family: Microsoft YaHei UI;
}

/* 原有样式保持不变 */
.video_8 {
  border-radius: 16rpx;
  width: 200rpx;
  height: 200rpx;
}

.font_2 {
  font-size: 36rpx;
  font-family: Microsoft YaHei UI;
  line-height: 35.22rpx;
  font-weight: 700;
  color: #000000;
}

.font_3 {
  font-size: 24rpx;
  font-family: Microsoft YaHei UI;
  line-height: 23.4rpx;
  color: #000000;
}

.font_4 {
  font-size: 16rpx;
  font-family: Microsoft YaHei UI;
  line-height: 14.38rpx;
  color: #979797;
}

.text-wrapper_2 {
  padding: 4.76rpx 0 3.72rpx;
  background-color: rgba(244, 174, 130, 0.20);
  border-radius: 8rpx;
  width: 48rpx;
}

.font_5 {
  font-size: 16rpx;
  font-family: Microsoft YaHei UI;
  line-height: 14.38rpx;
  color: #ffffff;
}

.text_5 {
  line-height: 15.52rpx;
}
</style>